<template>
	<view class="beijingse" style="padding-bottom: 150rpx;" v-if="pageShow">
		<!-- 规格 -->

		<view class="" style="padding-bottom: 60rpx;">
			<u-swiper :list="dataAll.images_text" height="375px"></u-swiper>
			<view class="mainpadding">
				<view class="ffffff radius mainpadding">
					<view class="flexleft">
						<view v-if="dataAll.goodsprice.difference != ''" class="titletext xiaocheng fonweight margin_top margin_right3">￥
							<text class="xiaocheng fonweight" style="font-size: 48rpx;">{{dataAll.price}}</text>
							<text class="xiaocheng fonweight" style="font-size: 48rpx;">/{{dataAll.goodsprice.difference}}</text>
						</view>
						<view v-else class="titletext xiaocheng fonweight margin_top margin_right3">￥
							<text class="xiaocheng fonweight" style="font-size: 48rpx;">{{dataAll.price}}</text>
						</view>
						<view class="main_size xiaohui zhonghuax fonweight margin_top">￥
							<text class="xiaohui main_size">{{dataAll.goodsprice.market_price}}</text>
						</view>
					</view>
					
					<view class="titletext xiaohei margin_top">{{dataAll.title}}</view>
				</view>
			</view>
			<view class="mainpadding ffffff margin_top" v-if="dataAll.comment_num">
				<view class="flexbetween" @click="jumpdetail('/pages_homepage/pingjialb?id=',listid)">
					<view class="sanshier bold xiaohei">商品评价（{{dataAll.comment_num}}）</view>
					<u-icon name="arrow-right" color="#B4B4B4" size="14"></u-icon>
				</view>
				<view class="" v-for="item in dataAll.comment" :key="item.id">
					<view class="flexbetween margin_top">
						<view class="flexleft">
							<image class="touxiag margin_right2" :src="item.user.avatar_text" mode=""></image>
							<view class="">
								<view class="zhonghei sanshier ">{{item.user.nickname}}</view>
								<view class="xiaohui ershil margin_top1 ">{{item.createtime_text}}</view>
							</view>
						</view>
						<u-rate :value="item.star" activeColor="#ff9341" readonly></u-rate>
					</view>
					<view class="xiaohui ershiba margin_top">{{item.content}}</view>
					<view class="flexleft flex_wrap pdl">
						<view class="flexcenter tpbox " v-for="(ite,ind) in item.images_text" :key="ind">
							<view class="tjtp">
								<image class="" :src="ite" mode="" @click.stop="lbtpriview(ind,item.images_text)"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="mainpadding ffffff margin_top">
				<view class="sanshier textcenter xiaohei">商品详情</view>
				<view class="fuwenben">
					<u-parse :content="dataAll.content"></u-parse>
				</view>
			</view>
		</view>
		<!-- 固定底部 -->
		<view class="ffffff mainpadding gudingdb flexbetween">
			<view class="flexleft" style="margin-left: 30rpx;">
				<!-- #ifdef APP-PLUS -->
				<view class="margin_right5" @click="sharefn">
					<u-icon name="share-square" color="#333333" size="28"></u-icon>
					<view class="smalltext textcenter xiaohui">分享</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<button open-type="share">
					<view class="margin_right5">
						<u-icon name="share-square" color="#333333" size="28"></u-icon>
						<view class="smalltext textcenter xiaohui">分享</view>
					</view>
				</button>
				<!-- #endif -->
				<view class="" @click="contactkf('admin0','1')">
					<u-icon name="kefu-ermai" color="#333333" size="28"></u-icon>
					<view class="smalltext textcenter xiaohui">客服</view>
				</view>
			</view>
			<view class="flexleft" v-if="dataAll.type==2">
				<view class="jrbtn flexcenter margin_right" @click="buytype(0)">加入购物车</view>
				<view class="lbtn flexcenter" @click="buytype(1)">立即购买</view>
			</view>
			<view class="bigbtn flexcenter" style="width: 65%;" v-else @click="buytype(1)">立即购买</view>
		</view>
		<u-popup :show="show" @close="show = false">
			<view class="mainpadding">
				<view class="flexbetween">
					<view class="sptp">
						<image class="" :src="dataAll.image_text" mode=""></image>
					</view>
					<view class="" style="width: 75%;">
						<view class="titletext xiaohei yhxk">{{dataAll.title}}</view>
						<view class="bigtext fonweight xiaocheng margin_top">¥{{price}}</view>
					</view>
				</view>
				<template v-if="dataAll.spu.length">
					<scroll-view scroll-y="true" style="max-height: 900rpx;">
						<view class="margin_top" v-for="item in dataAll.spu" :key="item.id">
							<view class="ershil fonweight xiaohei">{{item.name}}</view>
							<view class="flexleft flex_wrap">
								<view
									:class="item.selecttext==ite?'yxbtn margin_top margin_right2':'wxbtn margin_top margin_right2'"
									v-for="(ite) in item.item" :key="ite" @click="checkgg(item,ite)">{{ite}}</view>
							</view>
						</view>
					</scroll-view>
					
				</template>
				<view class="flexbetween margin_top5">
					<view class="ershil fonweight xiaohei">购买数量</view>
					<u-number-box button-size="36" color="#000000" bgColor="#F7F7F7" iconStyle="color: #fff"
						v-model="buynumber"></u-number-box>
				</view>
				<view class="bigbtn margin_top6" @click="ggclose()">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				listid: "",
				dataAll: {},
				buynumber: 1,
				ggshow: false,
				price: "", //规格弹框价格
				stock: "", //库存
				sku_id: "",
				guigeflag: false, //是否选择规格
				show: false,
				buy_type: 0, //0加购，1购买
				pageShow:false,
				qrcodeurl:""
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.getDetail()
			this.getdata()
		},
		onShareAppMessage: function(options) {
			return {
				title: '宜品佳商城',
				imageUrl: '',
				path: '/pages/homepage?otherinvite_code='+uni.getStorageSync("invite_code") || ""
			}
		},
		onShareTimeline: function() {
			return {
				title: '宜品佳商城',
				imageUrl: '',
				path: '/pages/homepage?otherinvite_code='+uni.getStorageSync("invite_code") || ""
			}
		},
		watch: {
			'dataAll.spu': {
				handler(newval) {
					let arr = []
					newval.forEach(item => {
						arr.push(item.selecttext)
					})
					// 规格换算价格
					let text = arr.join()
					this.dataAll.sku.forEach(item => {
						// 如果后台返回规格与前端规格一致，赋值换算
						if (item.difference == text) {
							this.price = item.price //价格赋值
							this.stock = item.stock //库存
							this.sku_id = item.id
						}
					})
					// 计算是否选择规格
					let num = 0
					arr.forEach(item => {
						if (item != "") {
							num = num + 1
						}
					})
					if (num != arr.length) {
						this.guigeflag = false
					} else {
						this.guigeflag = true
					}
				},
				deep: true
			}
		},
		methods: {
			getdata() {
				let _this = this;
				httpRequest.request('/api/index/getConfigInfo', 'GET', {}).then(res => {
					if (res.code == 1) {
						this.qrcodeurl = res.data.share_url + '?code=' + uni.getStorageSync("invite_code")
					}
				})
			},
			sharefn(){
				let that = this
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: that.qrcodeurl,
					title: "宜品佳",
					summary: "宜品佳",
					imageUrl: that.dataAll.image_text,
					success: function (res) {
						uni.hideLoading()
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						uni.hideLoading()
						console.log("fail:" + JSON.stringify(err));
					}
				});

			},
			contactkf(firend_id,type){
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				httpRequest.request('/api/user/addFriends', 'GET', {
					firend_id,
					type
				}).then(res => {
					uni.hideLoading()
					let data = {
						firend_id: firend_id,
						friend_name: "宜品佳",
						firend_avatar_text: "@/static/image/logo.jpg"
					}
					if(res.code==1){
						uni.navigateTo({
							url:"/pages_mypage/chat?msg=" + encodeURIComponent(JSON.stringify(data))
						})
					}else{
						httpRequest.toast(res.msg)
					}
				})
			},
			buytype(val) {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				this.buy_type = val
				this.show = true
			},
			ggclose() {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				if (this.dataAll.status == "hidden") {
					httpRequest.toast("当前商品已下架，暂时无法购买")
					return
				}
				if (!this.guigeflag) {
					httpRequest.toast("请先选择规格")
					return
				}
				this.show = false
				if (this.buy_type == 0) { //加入购物车
					this.addcar()
				} else {
					let data = {
						order_type: this.dataAll.type,
						type: "detail", //detail=商品详情,cart=购物车
						data: [{
							goods_id: this.listid,
							number: this.buynumber,
							sku_id: this.dataAll.specs == "single" ? this.dataAll.goodsprice.id : this.sku_id
						}]
					}
					uni.navigateTo({
						url: '/pages_homepage/querendd?msg=' + encodeURIComponent(JSON.stringify(data))
					})
				}
			},
			addcar() {
				httpRequest.request('/api/cart/addCart', 'GET', {
					goods_id: this.listid,
					number: this.buynumber,
					sku_id: this.sku_id
				}).then(res => {
					httpRequest.toast(res.msg)
				})
			},
			// 规格选择
			checkgg(item, ite) {
				item.selecttext = ite
			},
			getDetail() {
				httpRequest.request('/api/goodscl/goodsDetail', 'GET', {
					goods_id: this.listid
				}, false, false, false).then(res => {
					this.pageShow = true
					res.data.spu.forEach(current => {
						current.item = current.item.split(",")
						this.$set(current, "selecttext", "")
					})
					res.data.content = res.data.content ? res.data.content.replace(/\<img/gi,
						'<img class="baifenbai" style="display:block;" ') : "";
					this.price = res.data.price
					this.dataAll = res.data
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fuwenben{ //富文本图片太大
	  ::v-deep img {
	    width: 100% !important;
	  }
	}
	/deep/._root{ //解决富文本图片太大溢出滑动
		overflow: hidden !important;
	}
	.wxbtn {
		padding: 15rpx;
		background: #F5F5F5;
		border-radius: 27rpx 27rpx 27rpx 27rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #666666;
		border: 2rpx solid #F5F5F5;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.yxbtn {
		display: flex;
		align-items: center;
		justify-content: center;
		// width: 147rpx;
		// height: 53rpx;
		padding: 15rpx;
		background: rgba(255, 147, 65, 0.1);
		border-radius: 27rpx 27rpx 27rpx 27rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FF9341;
		border: 2rpx solid #FF9341;
	}

	.jianbox {
		width: 178rpx;
		height: 48rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		border: 1rpx solid #D2D2D2;
	}
.tjtp {
		width: 209rpx;
		height: 209rpx;
		position: relative;
	
		image {
			border-radius: 10rpx;
			width: 100%;
			height: 100%;
		}
	}
	.biak {
		width: 1rpx;
		height: 47rpx;
		background-color: #D2D2D2;
	}

	.sptp {
		width: 134rpx;
		height: 134rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;

		image {
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			width: 100%;
			height: 100%;
		}
	}

	.lbtn {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		height: 76rpx;
		background-color: #f6373a;
		width: 230rpx;
		border-radius: 0 45rpx 45rpx 0;
	}

	.jrbtn {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		height: 76rpx;
		background-color: #FFB801;
		width: 230rpx;
		border-radius: 45rpx 0 0 45rpx;
	}
</style>
<!-- 评论 -->
<style lang="scss" scoped>
	.touxiag {
		width: 73rpx;
		border-radius: 50%;
		height: 73rpx;
	
	}
	
	.touxiags{
		width: 73rpx;
		border-radius: 50%;
		height: 73rpx;
	}
</style>